<!--
 * @Description: 左侧导航组件
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-03-16 09:01:37
 * @LastEditors: zhou
 * @LastEditTime: 2022-08-27 15:54:17
-->

<template>
    <div class="pro-nav">
        <div
            v-for="item in list"
            :key="item.id"
            :class="['btn', item.tabName, item.checked ? 'checked' : '']"
            @click="tabComp(item.id)"
        >
            {{ item.name }}
        </div>
    </div>
</template>

<script>
export default {
    name: "ProNav",
    props: {
        list: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {};
    },
    computed: {},
    methods: {
        tabComp(id) {
            this.$emit("tabComp", id);
        },
    },
};
</script>

<style lang="scss" scoped>
.pro-nav {
    // background-color: #f99;
    display: flex;
    justify-content: space-between;
    .btn {
        // writing-mode: vertical-rl;
        color: #fff;
        width: vw(124);
        height: vh(36);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: vw(15);
    }

    .NavDetection,
    .NavPerson,
    .NavCompany,
    .NavIndustry,
    .NavGrid,
    .NavGridUser {
        margin-right: vw(16);
    }
    .NavDetection,
    .NavPerson,
    .NavCompany,
    .NavIndustry,
    .NavGrid,
    .NavGridUser,
    .NavMap{
        background: url("~@/assets/images/proview/nav24.png") no-repeat;
        background-size: 100% 100%;
    }
    .NavDetection.checked,
    .NavPerson.checked,
    .NavCompany.checked,
    .NavIndustry.checked,
    .NavGrid.checked,
    .NavGridUser.checked,
    .NavMap.checked{
        background: url("~@/assets/images/proview/nav25.png") no-repeat;
        background-size: 100% 100%;
    }
}
</style>
